<template>
    <footer class="footer">
        <div class="container">
            <!-- 联系信息 -->
            <div class="footer-section">
                <div class="logo">
                    <svg-icon name="common/homelogo" />
                    <div class="logo-text">
                        <span class="main-text">吉居榭</span>
                        <span class="sub-text">让家更美好</span>
                    </div>
                </div>
                <div class="contact-info">
                    <div class="contact-title">联系我们</div>
                    <p>电话：+123 400 123</p>
                    <p>在这里，每一处细节都经过精心挑选，只为让您找到最适合居住的理想家园。</p>
                    <p>邮箱：example@mail.com</p>
                    <div class="social-links">
                        <!-- 预留社交图标位置 -->
                        <div class="social-placeholder" v-for="i in 5" :key="i"></div>
                    </div>
                </div>
            </div>

            <!-- 功能链接 -->
            <div class="footer-section">
                <h3>功能</h3>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">成为主人</a></li>
                    <li><a href="#">定价</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">联系</a></li>
                </ul>
            </div>

            <!-- 公司信息 -->
            <div class="footer-section">
                <h3>公司</h3>
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">新闻</a></li>
                    <li><a href="#">投资</a></li>
                    <li><a href="#">版权</a></li>
                    <li><a href="#">编号</a></li>
                </ul>
            </div>

            <!-- 团队与政策 -->
            <div class="footer-section">
                <h3>团队与政策</h3>
                <ul>
                    <li><a href="#">服务条款</a></li>
                    <li><a href="#">隐私说明</a></li>
                    <li><a href="#">安全</a></li>
                </ul>
            </div>
        </div>
    </footer>
</template>

<style lang="scss" scoped>
.footer {
    background: #fff;
    padding: 100px 0 50px 0;
    
    .container {
        max-width: 1920px;
        margin: 0 auto;
        padding: 0 100px 0 300px;
        display: grid;
        grid-template-columns: 2fr repeat(3, 1fr);
    }
    
    .footer-section {
        .logo {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 24px;
            color: #4A60A1;
            
            .svg-icon {
                width: 44px;
                height: 44px;
            }
            
            .logo-text {
                display: flex;
                flex-direction: column;
                
                .main-text {
                    font-size: 24px;
                    font-weight: bold;
                    line-height: 1.2;
                }
                
                .sub-text {
                    font-size: 12px;
                    color: #4A60A1;
                    letter-spacing: 0.1em;
                }
            }
        }
        
        h3 {
            color: #1B1D1F;
            font-size: 18px;
            margin-bottom: 36px;
            font-weight: 600;
        }
        
        .contact-info {
            .contact-title {
                color: #1B1D1F;
                font-size: 18px;
                margin-bottom: 16px;
                font-weight: 600;
            }
            
            p {
                color: #6d737a;
                line-height: 1.6;
                margin-bottom: 12px;
                max-width: 360px;
            }
        }
        
        .social-links {
            display: flex;
            gap: 16px;
            margin-top: 12px;
            
            .social-placeholder {
                width: 48px;
                height: 48px;
                border-radius: 4px;
                background: #EDEFF6;
                cursor: pointer;
                transition: background-color 0.3s;
                
                &:hover {
                    background: #E6E8EC;
                }
            }
        }
        
        ul {
            list-style: none;
            padding: 0;
            
            li {
                margin-bottom: 18px;
                
                a {
                    color: #6d737a;
                    text-decoration: none;
                    transition: color 0.3s;
                    
                    &:hover {
                        color: #4A60A1;
                    }
                }
            }
        }
    }
}
</style> 